{% extends "base.html" %}

{% block styles %}
{{ super() }}
<style>
    .navbar-nav .content-item {
        margin-right: 1rem; /* 右边距 */
        margin-left: 1rem; /* 左边距 */
        margin-top: 0.5rem; /* 上边距 */
        margin-bottom: 0.5rem; /* 下边距 */
    }

    .content-item-large-text {
        font-size: 2rem; /* 调整字体大小 */
    }

    .separator {
        width: 30%; /* 横线长度为画面宽度的一半 */
        height: 2px; /* 横线高度 */
        background-color: #D3D3D3; /* 横线颜色 */
        margin: 1rem auto; /* 上下间距1rem，自动左右居中 */
    }
</style>
{% endblock %}

{% block app_content %}
{% if content_items %}
<ul class="d-flex flex-column justify-content-center align-items-center">
    {% for item in content_items %}
    <li style="list-style-type: none;"><br></li>
        <li class="content-item content-item-large-text" style="list-style-type: none; white-space: pre-wrap;">
        距离刷完数据还剩下{{ last_num }}条
    </li>
    <li class="content-item content-item-large-text" style="list-style-type: none; white-space: pre-wrap;">
        {{ item.content }}
    </li>
    <li class="content-item content-item-large-text" style="list-style-type: none; white-space: pre-wrap;">
        {{ item.content_xinghuo }}
    </li>
    <li class="separator" style="list-style-type: none;"></li> <!-- 在内容之后添加一条横线 -->
    {% endfor %}
    <li style="list-style-type: none;"><br></li>
    <li style="list-style-type: none;">
        <a href="{{ url_for('main.index') }}" class="btn btn-primary btn-sm">下一条</a>
    </li>
</ul>
{% else %}
<p>No content item found.</p>
{% endif %}
{% endblock %}